<template>
  <div>
    <el-row>
      <el-col :span="16">
        <el-tag>线索ID;{{id}}</el-tag>
        <!--        <el-row type="flex" justify="end">-->
        <!--          <el-col :span="6">-->
        <!--            &lt;!&ndash;            <el-button type="danger" @click="handleFalseClue">伪线索</el-button>&ndash;&gt;-->
        <!--            &lt;!&ndash;            <el-button type="success" @click="handleTransform">转商机</el-button>&ndash;&gt;-->
        <!--            <el-button v-if="(form.status==1||form.status==2)&&form.falseCount<3" size="mini" type="danger"-->
        <!--                       @click="handleFalseClue">伪线索-->
        <!--            </el-button>-->
        <!--            <el-button v-if="form.status==1||form.status==2" size="mini" type="success" @click="handleTransform">转商机-->
        <!--            </el-button>-->
        <!--          </el-col>-->
        <!--        </el-row>-->
        <hr/>
        <el-form :disabled="disabled" ref="form" :model="form" :rules="rules" label-width="80px">
          <el-row :gutter="5">
            <el-col :span="8">
              <el-form-item label="客户姓名" prop="name">
                <el-input v-model="form.name" type="text" placeholder="请输入客户姓名"/>
              </el-form-item>
            </el-col>
            <el-col :span="8">
              <el-form-item label="手机号" prop="phone">
                <el-input v-model="form.phone" placeholder="请输入手机号" type="number"/>
              </el-form-item>
            </el-col>
            <el-col :span="7">
              <el-form-item label="职业" prop="occupation">
                <el-select v-model="form.occupation" clearable placeholder="请输入意向等级" @keyup.enter.native="handleQuery">
                  <el-option v-for="item in dict.type.occupation" :label="item.label" :value="item.value "
                             :key="item.value"></el-option>
                </el-select>
              </el-form-item>
            </el-col>
          </el-row>
          <el-row :gutter="5">
            <el-col :span="8">
              <el-form-item label="学历" prop="occupation">
                <el-select v-model="form.education" clearable placeholder="请选择学历" @keyup.enter.native="handleQuery">
                  <el-option v-for="item in dict.type.education" :label="item.label" :value="item.value "
                             :key="item.value"></el-option>
                </el-select>
              </el-form-item>
            </el-col>
            <el-col :span="8">
              <el-form-item label="所在地区" prop="area">
                <el-cascader size="large"
                             :options="selectedOptions"
                             v-model="form.area"

                             @change="handleChange"/>

              </el-form-item>
            </el-col>
            <el-col :span="7">
              <el-form-item label="微信号" prop="weixin">
                <el-input v-model="form.weixin" placeholder="请输入微信号"/>
              </el-form-item>
            </el-col>
          </el-row>
          <el-row :gutter="5">
            <el-col :span="8">
              <el-form-item label="年龄" prop="age">
                <el-input v-model="form.age" placeholder="请输入年龄" type="number"/>
              </el-form-item>
            </el-col>
            <el-col :span="8">
              <el-form-item label="专业" prop="major">
                <el-select v-model="form.major" clearable placeholder="请选择专业" @keyup.enter.native="handleQuery">
                  <el-option v-for="item in dict.type.education" :label="item.label" :value="item.value "
                             :key="item.value"></el-option>
                </el-select>
              </el-form-item>
            </el-col>
            <el-col :span="7">
              <el-form-item label="在职情况" prop="major">
                <el-select v-model="form.job" clearable placeholder="请选择在职情况" @keyup.enter.native="handleQuery">
                  <el-option v-for="item in dict.type.job" :label="item.label" :value="item.value "
                             :key="item.value"></el-option>
                </el-select>
              </el-form-item>
            </el-col>
            <el-col :span="8">
              <el-form-item label="当前薪资" prop="salary">
                <el-select v-model="form.salary" clearable placeholder="请选择当前薪资" @keyup.enter.native="handleQuery">
                  <el-option v-for="item in dict.type.salary" :label="item.label" :value="item.value "
                             :key="item.value"></el-option>
                </el-select>
              </el-form-item>
            </el-col>
            <el-col :span="8">
              <el-form-item label="qq号" prop="qq">
                <el-input v-model="form.qq" placeholder="请输入qq号"/>
              </el-form-item>
            </el-col>
            <el-col :span="7">
              <el-form-item label="性别" prop="sex">
                <el-select v-model="form.sex" clearable placeholder="请选择性别" @keyup.enter.native="handleQuery">
                  <el-option v-for="item in dict.type.sys_user_sex" :label="item.label" :value="item.value "
                             :key="item.value"></el-option>
                </el-select>
              </el-form-item>
            </el-col>
            <el-col :span="8">
              <el-form-item label="目标薪资" prop="expected_salary">
                <el-select v-model="form.expected_salary" clearable placeholder="请选择目标薪资"
                           @keyup.enter.native="handleQuery">
                  <el-option v-for="item in dict.type.salary" :label="item.label" :value="item.value "
                             :key="item.value"></el-option>
                </el-select>
              </el-form-item>
            </el-col>
            <el-col :span="15">
              <el-form-item label="备注" prop="remark">
                <el-input v-model="form.remark" type="textarea" placeholder="请输入跟进记录"/>
              </el-form-item>
            </el-col>
          </el-row>
          <el-tag>客户意向</el-tag>
          <hr/>
          <el-row :gutter="5">
            <el-col :span="8">
              <el-form-item label="意向学科" prop="subject">
                <el-select v-model="form.subject" @change="hangelSubject" clearable @keyup.enter.native="handleQuery"
                           placeholder="请选择意向学科">
                  <el-option v-for="item in dict.type.course_subject" :label="item.label" :value="item.value "
                             :key="item.key"></el-option>
                </el-select>
              </el-form-item>
            </el-col>
            <el-col :span="8">
              <el-form-item label="意向课程" prop="courseId">
                <el-select v-model="form.courseId" clearable @keyup.enter.native="handleQuery" placeholder="请选择意向课程">
                  <el-option @click.native="hangelCoures(cource)" v-for="cource in courceOptions" :label="cource.name"
                             :value="cource.id "
                             :key="cource.id"></el-option>
                </el-select>
              </el-form-item>
            </el-col>
            <el-col :span="8">
              <el-form-item label="意向金额" prop="price">
                <el-input v-model="form.price" placeholder="请输入意向金额" type="number"/>
              </el-form-item>
            </el-col>
          </el-row>
          <el-row>
            <el-col :span="8">
              <el-form-item label="学习原因" prop="reasons">
                <el-input v-model="form.reasons" placeholder="请输入学习原因"/>
              </el-form-item>
            </el-col>
            <el-col :span="8">
              <el-form-item label="职业计划" prop="plan">
                <el-input v-model="form.plan" placeholder="请输入职业计划"/>
              </el-form-item>
            </el-col>
            <el-col :span="8">
              <el-form-item label="时间计划" prop="remark">
                <el-input v-model="form.name" placeholder="请输入时间计划"/>
              </el-form-item>
            </el-col>
          </el-row>
          <el-row :gutter="5">
            <el-col :span="8">
              <el-form-item label="其他意向" prop="otherintention">
                <el-input v-model="form.otherIntention" placeholder="其他意向"/>
              </el-form-item>
            </el-col>
          </el-row>
          <el-tag>添加沟通记录</el-tag>
          <hr/>
          <el-row :gutter="5">
            <el-col :span="8">
              <el-form-item label="跟进状态" prop="trackStatus">
                <el-select v-model="form.trackStatus" placeholder="请输入跟进状态" clearable @keyup.enter.native="handleQuery">
                  <el-option v-for="item in dict.type.track_status"
                             :label="item.label" :key="item.key" :value="item.value"></el-option>
                </el-select>
              </el-form-item>
            </el-col>
            <el-col :span="6">
              <el-form-item label="下次更近时间" prop="nextTime">
                <el-date-picker clearable
                                v-model="form.nextTime"
                                type="date"
                                value-format="yyyy-MM-dd"
                                placeholder="请选择下次跟进时间">
                </el-date-picker>
              </el-form-item>
            </el-col>
          </el-row>
          <el-row :gutter="5">
            <el-col :span="8">
              <el-form-item label="沟通重点" prop="communicationpoint">
                <el-select v-model="form.communicationPoint" multiple placeholder="请输入沟通重点" clearable
                           @keyup.enter.native="handleQuery">
                  <el-option v-for="item in dict.type.communication_point"
                             :label="item.label" :key="item.key" :value="item.value"></el-option>
                </el-select>
              </el-form-item>
            </el-col>
            <el-col :span="8">
              <el-form-item label="沟通纪要" prop="record">
                <el-input v-model="form.record" placeholder="沟通纪要"/>
              </el-form-item>
            </el-col>
          </el-row>
          <el-row>
            <el-col :offset="16">
              <el-form-item>
                <el-button v-if="(form.status==1||form.status==2)&& !disabled" type="primary" @click="submitForm">保存
                </el-button>
                <el-button type="primary" @click="$emit('cancel')">取消</el-button>
                <el-button icon="el-icon-check" @click="handleGiveBack" type="danger">踢回公海</el-button>
                <el-button @click="handleTransForm" type="success">转客户</el-button>
              </el-form-item>

            </el-col>
          </el-row>

          <!--          <give-back ref="giveBack"-->
          <!--          :businessId="businessId"-->
          <!--          @success="ok">-->
          <!--            <transform ref="transform"-->
          <!--            :businessId="businessId"-->
          <!--            @success="ok">-->

          <!--            </transform>-->
          <!--          </give-back>-->
        </el-form>
      </el-col>

      <el-col :span="8">
        <track-list :id="clueId" :key="trackListKey"></track-list>
      </el-col>
    </el-row>
    <false-clue ref="falseClueDialog" @success="trackListKey++"></false-clue>

    <dive-back ref="diveBack" @success="ok"></dive-back>

    <transform ref="transform" :businessId="id" @success="ok"></transform>
  </div>
</template>

<script>
  import {getBusiness} from "@/api/crm/business";
  import {transform2Business} from "../../../../api/crm/clueTrack";
  import TrackList from "@/views/crm/business/conponents/track-list";
  import FalseClue from "@/views/crm/clue/conponents/false-clue";
  import {provinceAndCityData, CodeToText, TextToCode} from 'element-china-area-data'
  import {addbusinessTrack} from '@/api/crm/businessTrack'
  import transform from "@/views/crm/business/conponents/transform";
  // import { giveBack} from "../../../../api/crm/businessTrack";
  import DiveBack from "@/views/crm/business/conponents/dive-back";
  import {getCourse, listCourse} from "../../../../api/crm/course";
  // import DiveBack from "./dive-back";

  export default {
    name: "track-index",
    props: {
      clueId: {type: [String, Number],},
      view: {type: Boolean},
      businessId: {type: [String, Number]}
    },
    components: {TrackList, FalseClue, DiveBack, transform},
    dicts: ['sys_user_sex', 'clues_level', 'course_subject', 'occupation', 'education', 'major', 'job', 'salary', 'sys_user_sex', 'track_status', 'communication_point'],
    data() {
      return {
        id: this.clueId,
        form: {},
        clue: {},
        rules: {},
        provinceAndCityDataOptions: provinceAndCityData,
        trackListKey: 0,
        disabled: false,
        selectedOptions: provinceAndCityData,
        courceOptions: [],
      }
    },
    watch: {
      clueId(newValue, oldValue) {
        this.id = newValue
        this.getList()
      },
      view: {
        handler: function (newValue, oldValue) {
          this.disabled = newValue;
        },
        immediate: true
      }
    },
    created() {
      this.getList();
    },
    methods: {
      getList() {
        getBusiness(this.id).then(resp => {
          this.form = resp.data;
        })
        this.trackListKey++;
      },
      submitForm() {
        addbusinessTrack(this.form).then(resp => {
          this.$message.success('操作成功！');
          this.getList();
          //通知父组件
          this.$emit('track');
        })
      },
      handleFalseClue() {
        this.$refs.falseClueDialog.open = true;
        this.$refs.falseClueDialog.id = this.id;
        this.$refs.falseClueDialog.resetForm();
      }, handleTransform() {
        this.$msgbox.confirm(`确定转换线索${this.id}到商机吗？`).then(() => {
          transform2Business({id: this.id, record: '转商机'}).then(resp => {
            this.handleSuccess();
          })
        })
      }, handleSuccess() {
        this.$message.success('操作成功');
        this.getList();
        //通知父组件
        this.$emit('success')
      }
      ,
      handleChange(value) {
        if (value && value.length) {
          this.form.provinces = CodeToText[value[0]]
          this.form.city = CodeToText[value[1]]
        } else {
          this.form.provinces = ''
          this.form.city - ''
        }
      },
      ok() {
        this.$emit('track');
        this.getList();
      },
      handleGiveBack() {
        this.$refs.diveBack.open = true;
        this.$refs.diveBack.businessId = this.clueId
        this.$refs.diveBack.resetForm();
      },
      hangelSubject(value) {
        console.log(value)
        listCourse({subject: value}).then(resp => {
          this.courceOptions = resp.rows
        })
      },
      hangelCoures(cource) {
        this.form.price = cource.price;
      },
      //重置
      resetForm() {
        this.form = {
          id: this.businessId,
          phone: null,
          contractNo: null,
          fileName: null,
          mailbox: null,
        }
      },
      handleTransForm() {
        this.$refs.transform.dialogVisible = true;
        this.$refs.transform.id = this.clueId;
        console.log(this.clueId);
        // this.$refs.resetForm();
      },

    }
  }
</script>


